<template>
  <view class="nav-bar">
    <view class="nav-item" @tap="navTo('home')" :class="{ active: active === 'home' }">
      <image :src="active === 'home' ? '/static/images/1-002.png' : '/static/images/1-001.png'" class="nav-icon"></image>
      <text class="nav-text">首页</text>
    </view>
    
    <view class="nav-item center" @tap="navTo('aichat')">
      <view class="avatar-container">
        <image src="https://i.ibb.co/TMmxh5LD/image.png" class="avatar"></image>
      </view>
    </view>
    
    <view class="nav-item" @tap="navTo('mine')" :class="{ active: active === 'mine' }">
      <image :src="active === 'mine' ? '/static/images/4-002.png' : '/static/images/4-001.png'" class="nav-icon"></image>
      <text class="nav-text">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabBar',
  props: {
    active: {
      type: String,
      default: 'home'
    }
  },
  methods: {
    navTo(page) {
      console.log('导航组件点击：', page);
      
      if (page === 'mine') {
        // 跳转到个人资料页面
        uni.switchTab({
          url: '/pages/user/index',
          fail: () => {
            uni.navigateTo({
              url: '/pages/user/index'
            });
          }
        });
      } else if (page === 'home') {
        // 跳转到首页
        uni.switchTab({
          url: '/pages/store_house_home/index',
          fail: () => {
            uni.navigateTo({
              url: '/pages/store_house_home/index'
            });
          }
        });
      } else if (page === 'aichat') {
        // 跳转到AI聊天页面
        uni.navigateTo({
          url: '/pages/aichat/index'
        });
      }
      
      this.$emit('change', page);
    }
  }
}
</script>

<style scoped>
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 40rpx;
  background-color: #ffffff;
  border-radius: 100rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
}

.nav-icon {
  width: 50rpx;
  height: 50rpx;
}

.nav-text {
  font-size: 24rpx;
  margin-top: 4rpx;
}

.center {
  position: relative;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  background-color: #e5ebf5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  border: 4rpx solid #ffffff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.active {
  color: #000000;
  font-weight: bold;
}
</style> 